<template>
  <div id="tabBar">
    <!--  -->
    <el-tag
      v-for="(item, index) in history"
      :key="index"
      :closable="index != 0"
      :type="item.isNow ? 'success' : 'info'"
      effect="plain"
      v-if="item.name != '控制台'"
      @close="handleClose(index)"
      @click="handleSet(item.path)"
      class="tag"
    >
      {{ item.name }}
    </el-tag>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("article", ["history"]),
  },
  methods: {
    ...mapMutations("article", {
      update_router: "update_default",
      remove_router: "remove_history",
    }),
    //关闭标签
    handleClose(index) {
      console.log(index);
      this.remove_router({ index: index });
    },
    //触发当前标签
    handleSet(path) {
      //更新默认选择的路由
      this.update_router(path);
      //跳转路由
      this.$router.push({ path });
    },
  },
  watch: {
    history(val) {
      console.log(val);
      val[0].isNow ? this.$router.push({ path: val[0].path }) : null;
    },
  },
};
</script>

<style scoped>
.tag {
  margin-right: 10px;
}
</style>